<template>
  <div>
      <Row class="body">
        <i-col span="2">银行编号</i-col>
        <i-col span="2">银行图片</i-col>
        <i-col span="2">银行名称</i-col>
        <i-col span="2">办卡奖励</i-col>
        <i-col span="2">推荐人返现奖励</i-col>
        <i-col span="3">办卡链接</i-col>
        <i-col span="3">进度链接</i-col>
        <i-col span="3">奖励条件</i-col>
        <i-col span="2">是否展示</i-col>
        <i-col span="3">操作</i-col>
      </Row>

      <Row class="list" v-for="item of bankList" :key="item.name">
        <i-col span="2">{{item.bankId}}</i-col>
        <i-col span="2">
          <img :src="item.img">
          <UploadImg  :bankId="item.bankId" @showParentComp="showParentComp"></UploadImg>
        </i-col>
        <i-col span="2"><i-input v-model="item.bankName"  style="width:80px"/></i-col>
        <i-col span="2"><i-input v-model="item.bankBonus"  style="width:50px"/></i-col>
        <i-col span="2"><i-input v-model="item.superiorBonus"  style="width:50px"/></i-col>
        <i-col span="3"><i-input v-model="item.urlCreateCard"  style="width:100px"/></i-col>
        <i-col span="3"><i-input v-model="item.urlPlanQuery"  style="width:100px"/></i-col>
        <i-col span="3">
          <i-input v-model="item.rewardConditions"  style="width:100px"/></i-col>
        <i-col span="2">
          <select v-model="item.status" style="width:50px">
              <option value="1" key="1">
                是
              </option>
              <option value="0" key="0">
                否
              </option>
          </select>
        </i-col>
        <i-col span="3"><i-button type="info" size="small"  @click="handleUpdateManager(item.bankId,item.img,item.bankName,item.bankBonus,item.superiorBonus,item.urlCreateCard,item.urlPlanQuery,item.rewardConditions,item.status)">修改</i-button>|<i-button type="error" size="small"  @click="handleDelManager(item.bankId)">删除</i-button></i-col>
      </Row>

  </div>

</template>

<script>
import axios from 'axios'
import UploadImg from './UploadImg'
export default {
  name: 'BankList',
  components: {
    UploadImg
  },
  data () {
    return {
        bankList:''
      }
  },
  methods: {
    showParentComp(data,id){
      console.log('data=============',data)
      console.log('id=============',id)
      for (let index = 0; index < this.bankList.length; index++) {
        const element = this.bankList[index];
        if(element.bankId===id){
          element.img=data
        }
      }

    },
    getListInfo () {
      axios.post('/web/api/bank/list').then(this.getListInfoSucc)
    },
    getListInfoSucc (res) {
      console.log('银行', res)
      this.bankList = res.data.date
    },
    handleUpdateManager (bankId,img,bankName,bankBonus,superiorBonus,urlCreateCard,urlPlanQuery,rewardConditions,status) {
      axios.post('/web/api/bank/edit',{"bankName":bankName,"img":img,"bankBonus":bankBonus,"bankId":bankId,"superiorBonus":superiorBonus,"urlCreateCard":urlCreateCard,"urlPlanQuery":urlPlanQuery,"rewardConditions":rewardConditions,"status":status}).then(this.updateInfoSucc)
    },
    updateInfoSucc (res) {
      console.log('修改', res)
      this.$Message.success("修改成功")
      this.getListInfo();
    },
    handleDelManager (bankId) {
      this.$Modal.confirm({
          title: '提示框',
          content: '<p>删除后将无法恢复，您确定要删除吗？</p>',
          loading: true,
          onOk: () => {
              setTimeout(() => {
                    this.$Modal.remove();
                    axios.post('/web/api/bank/delete',{"bankId":bankId}).then(this.delInfoSucc)
              }, 2000);
          }
      });


    },
    delInfoSucc (res) {
      this.$Message.success(res.data.message)
      this.getListInfo();
    }
  },
  mounted () {
    this.getListInfo();
  }
}
</script>
<style lang="stylus" scoped>
  .body
    width: 100%
    line-height 3
    font-size 14px
    color #2680c4
    background #eff3fa
    text-align center
  .list
    line-height 3
    font-size 14px
    text-align center
    color #2680c4
img{
  width:5rem;
  height : 5rem;
}


</style>

